<template>
  <div class="order">
    <van-nav-bar title="报名信息" left-arrow @click-left="onClickLeft" fixed />
    <div class="card">
      <div class="info" v-if="orderDetail.activity_info">
        <div class="left">
          <img :src="orderDetail.activity_info.poster" alt />
        </div>
        <div class="right">
          <div class="title">{{orderDetail.activity_info.title}}</div>
          <div class="text">
            <div
              class="time"
            >时间：{{orderDetail.activity_info.start_time|changeNum|formatDate("yyyy-MM-dd hh:mm")}}</div>
            <div
              class="address"
            >地点：{{orderDetail.activity_info.city}}{{orderDetail.activity_info.district}}</div>
          </div>
        </div>
      </div>
      <div v-for="(item,index) in orderDetail.tick_info" :key="index">
        <div class="ticket" v-if="index==0">
          <div class="left">{{item.ticket_name}}</div>
          <div class="center">X{{ orderDetail.tick_info.length}}</div>
          <div class="right">¥{{item.ticket_price}}</div>
        </div>
      </div>
    </div>
    <div class="signUpPeople">
      <div class="left">报名人信息</div>
      <div class="right">
        <div v-for="(item,index) in orderDetail.tick_info" :key="index">
          <div v-if="index<=3" class="wrap">
            <span v-for="(itemn,indexn) in item.user_set_values" :key="indexn">
              <font v-if="itemn.name=='姓名'">{{itemn.value}}、</font>
            </span>
          </div>
        </div>等
      </div>
    </div>
    <div class="footer" v-if="orderDetail.order_info">
      <div class="total">合计： ¥ {{orderDetail.order_info.total_money}}</div>
      <div class="btn" @click="pay">去付款</div>
    </div>
    <div class="pay" v-if="orderDetail.order_info">
      <van-dialog v-model="showPay" title="支付" :show-confirm-button="false">
        <div class="close" @click="close">
          <img src="../assets/images/guanbi@2x.png" alt />
        </div>
        <div class="content">
          <div class="price">
            <div>
              ￥
              <span>{{orderDetail.order_info.total_money}}</span>
            </div>
          </div>
          <div class="payType">
            <img src="../assets/images/icon_wechat_pay.png" alt />
            <span>微信支付</span>
          </div>
          <div class="btn" @click="wxPay">
            <span>付款并报名</span>
          </div>
        </div>
      </van-dialog>
    </div>
    <div v-if="showBind">
      <bindPhone :uid="uid" :activity_id="activity_id"></bindPhone>
    </div>
    <div class="downloadApp">
      <van-dialog
        v-model="showDownload"
        :show-confirm-button="false"
        :close-on-click-overlay="true"
      >
        <div class="downloadDialog">
          <div class="text">请前往现信APP继续操作</div>
          <div class="btn" @click="downloadApp">马上下载现信APP</div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>
<script>
import vuefilter from "../common/vuefilter.js";
export default {
  name: "order",
  filters: {
    formatDate: vuefilter.formatDate,
    changeNum: vuefilter.changeNum
  },
  data() {
    return {
      orderId: "",
      totalPrice: "",
      orderDetail: {},
      showPay: false,
      payInfo:{},
       uid: "",
      activity_id: "",
      showBind: false,
      showDownload:false,
    };
  },
  mounted() {
     if (this.$route.query.uid) {
      this.uid = this.$route.query.uid;
    }
    if (this.$route.query.activity_id) {
      this.activity_id = this.$route.query.activity_id;
    }
    //  if (!this.$cookies.get("token")) {
    //   this.$router.push({
    //     path: "/login",
    //     query: {
    //       uid: this.uid,
    //       activity_id: this.activity_id
    //     }
    //   });
    //   return;
    // }
    this.totalPrice = this.$route.query.totalPrice;
    this.orderId = this.$route.query.orderId;
    this.getOrderDetail();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    pay() {
      if (this.$cookies.get("first_login")!=0) {
        this.showBind = true;
        return;
      }
      this.showPay = true;
      // this.$router.push({ path: "/activity" });
    },
    close() {
      this.showPay = false;
    },
    async getOrderDetail() {
      let params = {
        token: this.$cookies.get("token"),
        out_trade_no: this.orderId
      };
      const res = await this.$axios.post(this.$api.getActivityOrder, params);
      if (res.code == 1) {
        this.orderDetail = res.data;
      } else {
        this.$message({
          message: "获取订单信息失败：" + res.msg,
          type: "error"
        });
      }
    },
    //微信支付
    async wxPay() {
      this.showDownload=true;
      return ;
      let params = {
        token: this.$cookies.get("token"),
        out_trade_no: this.orderId,
        type:3,
        password:"",
      };
      const res = await this.$axios.post(this.$api.activityOrderPay, params);
      if (res.code == 1) {
        this.payInfo = res.data;
      } else {
        this.$message({
          message: "支付失败：" + res.msg,
          type: "error"
        });
      }
    },
     //下载APP
    downloadApp() {
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        window.location.href = this.$api.downloadUrl;
      }
      if (isAndroid) {
        window.location.href = this.$api.downloadUrl;
      }
    }
  }
};
</script>
<style scoped>
.order {
  padding-top: 0.46rem;
  padding-bottom: 0.5rem;
}
.footer {
  padding-left: 0.12rem;
  display: flex;
  width: 100%;
  height: 0.5rem;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
}
.footer .total {
  width: 60%;
  display: flex;
  align-items: center;
  font-size: 0.15rem;
  color: #000;
  /* border-top:1px solid #D3D3D3; */
}
.footer .btn {
  width: 40%;
  display: flex;
  align-items: center;
  font-size: 0.17rem;
  color: #fff;
  background: #00c6d8;
  justify-content: center;
}
.card {
  margin-top: 0.07rem;
  background: #fff;
  padding: 0.09rem 0.15rem 0;
}
.card .info {
  display: flex;
  width: 100%;
  padding-bottom: 0.16rem;
}
.card .info .left img {
  width: 1.15rem;
  height: 0.79rem;
}
.card .info .right {
  display: flex;
  flex: auto;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 0.1rem;
  width: calc(100% - 1.15rem);
}
.card .info .right .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.16rem;
  color: #000000;
  width: 100%;
}
.card .info .right .text {
  font-size: 0.12rem;
  color: #646464;
}
.ticket {
  border-top: 1px solid #e3e3e3;
  height: 0.44rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.14rem;
  color: #000000;
}
.signUpPeople {
  margin-top: 0.1rem;
  height: 0.49rem;
  display: flex;
  padding: 0 0.15rem;
  background: #fff;
  justify-content: space-between;
  align-items: center;
}
.signUpPeople .left {
  font-size: 0.14rem;
  color: #000000;
}
.signUpPeople .right {
  font-size: 0.12rem;
  color: #736d6d;
  display: flex;
}
.pay >>> .van-dialog__header {
  height: 0.45rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #c7c7c7;
}
.pay .close {
  position: absolute;
  top: 0.18rem;
  left: 0.17rem;
}
.pay .close img {
  width: 0.1rem;
  height: 0.1rem;
}
.pay .content {
  padding: 0 0.2rem;
}
.pay .content .price {
  height: 0.85rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #c7c7c7;
  font-size: 0.18rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}
.pay .content .price span {
  font-size: 0.43rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}
.pay .content .btn {
  height: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #c7c7c7;
}
.pay .content .btn span {
  width: 202px;
  height: 33px;
  background: rgba(0, 198, 216, 1);
  box-shadow: 0px 2px 5px 0px rgba(70, 21, 21, 0.22);
  border-radius: 17px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.downloadDialog {
  padding: 0.3rem;
}
.downloadDialog .text {
  text-align: center;
  margin-bottom: 0.2rem;
}
.downloadDialog .btn {
  width: 100%;
  height: 0.4rem;
  background: #00c6d8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
</style>


